<template>
    <view class="petStatus f ai-c fd-c">
        <view class="ph-32 pt-108 f jc-f-e w-f">
            <view class="w-120 next" @click="skipTap"><u-button text="跳过" color="#f5f5f5"></u-button> </view>
        </view>
        <view class="mt-89 fs-48 fw-600">您最想养的是</view>
        <view class="f mt-120">
            <view class="w-317 h-389 pet-box ph-36 pv-36 mr-20" :class="curt == 1 ? 'active' : ''" @click="changeCurt(1)">
                <image
                    :src="getBaseUrl() + '/admin-api/system/file/19/get/8be9fa8cacd955c210f6cd2c49e80c56a39abff0eb458c868692a4c37942e86b.png'"
                    class="w-245 h-245"
                ></image>
                <view class="f ai-c jc-c mt-28">
                    <image :src="curt == 1 ? selectCheck : select" class="w-32 h-32 mr-12"></image>
                    <view class="fs-32 fw-600 text-color4">汪星人</view>
                </view>
            </view>
            <view class="w-317 h-389 pet-box ph-36 pv-36" :class="curt == 2 ? 'active' : ''" @click="changeCurt(2)">
                <image
                    :src="getBaseUrl() + '/admin-api/system/file/19/get/b9f308955f22da184152a5ebf04fd2cc0bb3914132a3b3bad7f38701347cf781.png'"
                    class="w-245 h-245"
                ></image>
                <view class="f ai-c jc-c mt-28">
                    <image :src="curt == 2 ? selectCheck : select" class="w-32 h-32 mr-12"></image>
                    <view class="fs-32 fw-600 text-color4">喵星人</view>
                </view>
            </view>
        </view>
        <view class="w-654 h-96 mt-92 btn">
            <u-button text="完成" color="#FABB3C" shape="circle" @click="toNext"></u-button>
        </view>
    </view>
</template>
<script setup lang="ts">
import selectCheck from '@/static/select-check.png';
import select from '@/static/select.png';
import { getBaseUrl } from '@/utils/env';
import { ref } from 'vue';
const curt = ref(null);
const changeCurt = (data: number) => {
    curt.value = data;
};
const toNext = () => {
    uni.switchTab({
        url: '/pages/index/index',
    });
};
function skipTap() {
    uni.switchTab({
        url: '/pages/index/index',
    });
}
</script>
<style lang="scss" scoped>
.petStatus {
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
    padding-top: var(--status-bar-height);
    box-sizing: border-box;
    .pet-box {
        background: #ffffff;
        border: 4rpx solid #f0f0f0;
        border-radius: 24rpx;
    }
    .active {
        background: #fff8eb;
        border: 4rpx solid #fabb3c;
    }
    .btn {
        position: fixed;
        bottom: 37rpx;
        left: 50%;
        margin-left: -327rpx;
        ::v-deep .u-button__text {
            font-size: 36rpx !important;
            font-weight: 600 !important;
        }
        ::v-deep .u-button {
            height: 96rpx !important;
        }
    }
    .next {
        ::v-deep .u-button__text {
            font-size: 22rpx !important;
            font-weight: 400 !important;
            color: #222222;
        }
        ::v-deep .u-button {
            height: 48rpx !important;
            border: 1px solid #dddddd !important;
        }
    }
}
</style>
